import { useAppDispatch, useAppSelector } from '@/hooks/useReduxHook'
import { getHotArticleList } from '@/store/articleSlice'
import React, { useEffect } from 'react'
import  useNavArticle  from '@/hooks/useNavArticle'
import style from './HotArticleWall.module.scss'
import LazyLoad from 'react-lazy-load'
export default function HotArticleWall():React.ReactElement {
    const dispactch =useAppDispatch()
    useEffect(()=>{
        dispactch(getHotArticleList())

    },[dispactch])
    const hotArticleList = useAppSelector(state=>state.article.hotArticleList)
    const { goToArticleInfo } = useNavArticle()
  return (
    <>
    {
     hotArticleList && hotArticleList.length&&<div className={`${style['hot-article-wall']} shadow__box`} >
    <div className={style['article-wall__title']}>
      <i className={`iconfont icon-redianxinwen ${style['card-content2-icon']}`}></i>
      <span>推荐文章</span>
    </div>
    {
        hotArticleList.map(article=>
            <div
           
            key={article.id}
            className={style['hot-articel-item']}
            onClick={()=>goToArticleInfo(article)}
          >
            <div className={`${style['aside-post-detail']} flex`}>
            <LazyLoad >
              <img className={style['aside-post-image']} src={article.thumbnail} />
              </LazyLoad>
              <div className={`${style['aside-post-title']} text--over`}>
                { article.title }
              </div>
            </div>
            <div className={style['aside-post-date']}>
              <i className={`iconfont ${style['icon-rili']} time-icon`}></i>{ article.createTime }
            </div>
          </div>

            )
    }
   
  </div>
}
    </>
   
  )
}
